<template>
	<view>
		<view class="input-area">
			<input v-model="value" class="input" type="text" placeholder="请输入" />
			<image @click="clearValue" v-if="clearable" src="/static/common/close.png" class="close"></image>
		</view>

		<button @click="save" class="btn">保存</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: ''
		};
	},
	onLoad(ops) {
		this.value = ops.name
	},
	computed: {
		clearable() {
			return this.value;
		}
	},
	methods: {
		clearValue() {
			this.value = '';
		},
        
		// 保存
		save() {
			if(this.value == '' || this.value == ' ' || this.value == null || this.value == undefined){
				uni.showToast({title: '请输入内容',icon:'error',mask:true})
				return;
			}
			
			uni.showToast({title: '加载中...',icon:'loading',mask:true})
			var _this = this;
			this.$api.request('/api/user/profile', {nickname:this.value}, this.$store.state.token, function(res){
				uni.hideLoading();
				uni.showToast({
					title: res.msg,
						mask:true,
						icon:'none',
					})
				
			});
		
		}
	}
};
</script>

<style>
page {
	background: #111823;
	padding: 12rpx 0;
}
.input-area {
	background: #ffffff;
	border-radius: 10rpx;
	height: 120rpx;
	margin: 0 30rpx;
	position: relative;
	overflow: hidden;
}
.input {
	width: 100%;
	height: 100%;
	padding: 0 30rpx;
	font-size: 32rpx;
	box-sizing: border-box;
}
.close {
	width: 28rpx;
	height: 28rpx;
	position: absolute;
	top: 50%;
	right: 30rpx;
	transform: translateY(-50%);
	z-index: 999;
}
.btn {
	width: 670rpx;
	height: 100rpx;
	background: #507afe;
	border-radius: 50rpx;

	color: #ffffff;
	font-size: 38rpx;
	font-weight: 500;
	margin: 120rpx auto;
}
.button-hover {
	opacity: 0.7;
}
</style>
